<template>
  <div class="app-container">
    <el-card style=" margin-bottom: 20px">
      <div slot="header">
        <span>筛选条件</span>
      </div>
      <div class="personal">
        <el-row type="flex" :gutter="50">
          <el-col :span="6">
            <span class="title">医生</span>
            <el-autocomplete
              class="inline-input"
              v-model="userName"
              :fetch-suggestions="querySearch"
              placeholder="请输入内容"
              :trigger-on-focus="false"
              @select="handleSelect"
              valueKey="nickName"
            ></el-autocomplete>
          </el-col>
          <el-col :span="6">
            <span class="title">日期</span>
            <el-select v-model="dateKey" placeholder="请选择时间范围" @change="SelectDateRange">
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
          </el-col>
          <el-col :span="6" v-if="showWeek">
            <span class="title">周</span>
            <el-date-picker
              v-model="dateRange"
              type="week"
              format="yyyy 第 WW 周"
              placeholder="选择周"
              @change="showValue">
            </el-date-picker>
          </el-col>
          <el-col :span="6" v-if="showMonth">
            <span class="title">月</span>
            <el-date-picker
              v-model="dateRange"
              type="month"
              placeholder="选择月"
              @change="showValue">
            </el-date-picker>
          </el-col>
          <el-col :span="6" v-if="showYear">
            <span class="title">年</span>
            <el-date-picker
              v-model="dateRange"
              type="year"
              placeholder="选择年"
              @change="showValue">
            </el-date-picker>
          </el-col>
          <el-col :span="6">
            <el-button type="primary" @click="getStatisticsData">确 定</el-button>
            <el-button @click="cancel">重 置</el-button>
          </el-col>
        </el-row>
      </div>
    </el-card>
    <el-card>
      <div slot="header">
        <span>数据统计</span>
      </div>
      <diagrams :statisticsData="statisticsData"></diagrams>
    </el-card>
  </div>
</template>

<script>
import diagrams from "@/views/dashboard/diagrams";
import {loadAllUser} from "@/api/system/user";
import {statistics} from "@/api/gaoxin/performance";
import dayjs from "@/api/gaoxin/dayjs.min";
export default {
  name: "statistics",
  components: {diagrams},
  data() {
    return {
      userId: null,
      dateKey: null,
      dateRange: null,
      statisticsData: [],
      userName: '',
      userList: [],
      options: [{
        value: 'week',
        label: '周'
      }, {
        value: 'month',
        label: '月'
      }, {
        value: 'year',
        label: '年'
      }],
      showWeek: false,
      showMonth: false,
      showYear: false,
    };
  },

  created() {
    this.loadAllUser();
    this.getStatisticsData();
  },
  methods: {

    getStatisticsData() {


      let query = {
        userId: this.userId,
        dateKey: this.dateKey,
        startTime: null,
      };
      if (this.dateRange != null) {
        query.startTime = dayjs(this.dateRange).format("YYYY-MM-DD HH:mm:ss");
      }
      console.log("query",query)
      let _this = this;
      statistics(query).then(res => {
        let dataList = res.dataList;
        console.log("dataList",_this.dataList);
        this.statisticsData = [];
        dataList.forEach(item => {
          this.statisticsData.push(item);
        })
        console.log("Data",this.statisticsData);

      });
    },

    querySearch(queryString, cb) {
      var userList = this.userList;
      // console.log("userList",userList)
      console.log("queryString",queryString)

      var results = queryString ? userList.filter(this.createFilter(queryString)) : userList;
      console.log("results",results)
      // 调用 callback 返回建议列表的数据
      cb(results);
    },
    createFilter(queryString) {
      return (userList) => {
        return (userList.nickName.toLowerCase().indexOf(queryString.toLowerCase()) === 0);
      };
    },
    handleSelect(item) {
      this.userId = item.userId;
    },
    SelectDateRange(item) {
      let dateKey = item;
      switch (dateKey) {
        case "week":
          this.showWeek = true;
          this.showMonth = false;
          this.showYear = false;
          break;
        case "month":
          this.showWeek = false;
          this.showMonth = true;
          this.showYear = false;
          break;
        case "year":
          this.showWeek = false;
          this.showMonth = false;
          this.showYear = true;
          break;
      }
    },
    showValue(value) {
      console.log("datevalue", value)
    },
    loadAllUser() {
      loadAllUser().then(res => {
        this.userList = res.users;
        console.log("loaduserList",this.userList)
      });
    },

    cancel() {
      this.userName = null;
      this.userId = null;
      this.dateKey = null;
      this.dateRange = null;
      this.showWeek = false;
      this.showMonth = false;
      this.showYear = false;
      this.getStatisticsData();
    }
  },
}
</script>

<style scoped>

.personal{

  height: 50px;
  display: flex;
  align-items: center;
}
.el-row {
  width: 100%;
  display: flex;
  align-items: center;
}
.el-col {
  display: flex;
  align-items: center;
}

.title{
  width: 80px;
  text-align: right;
  margin-right: 20px;
}
</style>
